import React, { PureComponent } from 'react';
import { Modal, List, InputItem, WhiteSpace, Button } from 'antd-mobile';
import { connect } from 'dva';
import ast from './index.less';
import md5 from 'md5'
import { setCookie } from '../../utils/auth'
import { createForm, formShape } from 'rc-form';
@connect(({ index, loading }) => ({ index, loading }))
class Index extends PureComponent {
  static propTypes = {
    form: formShape,
  };
  constructor(props, context) {
    super(props, context)
    this.state = {
      randoms: "",
      loading: true,
      alert: {
        show: false,
        msg: ""
      }
    }
  }
  // cycle
  componentDidUpdate() {

  }
  componentDidMount() {

  }
  // method
  onClose = key => () => {
    this.setState({
      alert: {
        show: false,
        msg: ""
      }
    });
  }
  random() {
    this.setState({
      randoms: Math.random(),
      loading: true,
      alert: {
        show: false,
        msg: ""
      }
    });
  }
  login(item, event) {
    this.setState({
      loading: false
    });
    this.props.form.validateFields((error, value) => {
      if (error) {
        this.setState({
          alert: {
            show: true,
            msg: "输入错误"
          }
        })
      } else {
        this.setState({
          loading: true
        });
        value.password = md5(`${value.username}{${value.password}}`)
        this.props.dispatch({ type: 'login/loginInfo', payload: { ...value } }).then(s => {
          if (s.statusCode === 200) {


          } else {
            if (s.statusCode == undefined) {
              setCookie('userLogin')
              if (s.roleName == "学生") {
                this.props.dispatch({ type: 'auth/redirect', payload: { url: `/stuIndex` } })
              }
              if (s.roleName == "任课教师") {
                this.props.dispatch({ type: 'auth/redirect', payload: { url: `/teaIndex` } })
              }
              if (s.roleName == "导师") {
                this.props.dispatch({ type: 'auth/redirect', payload: { url: `/mentorIndex` } })
              }
            } else {
              this.setState({
                alert: {
                  show: true,
                  msg: s.message
                }
              })
            }
          }
        })
      }
    });
  }
  render() {
    const { getFieldProps, getFieldError } = this.props.form;
    let loadings = (<div className={ast.loading}>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>)
    let msg = (<p>登录</p>)
    return (
      <div className={ast.bg}>
        <Modal
          visible={this.state.alert.show}
          transparent
          maskClosable={false}
          // title="Title"
          onClose={this.onClose('modal1')}
          footer={[{ text: 'Ok', onPress: () => { this.onClose('modal1')(); } }]}
          wrapProps={{ onTouchStart: this.onWrapTouchStart }}>
          <div style={{ height: 25, overflow: 'scroll' }}>
            {this.state.alert.msg}
          </div>
        </Modal>
        <div className={ast.login_logo_div}>
          <img className={ast.login_logo} src={require('../../assets/login_logo.png')} />
        </div>
        <div>
          <List renderHeader={() => ''} className={ast.input_group}>
            <InputItem clear placeholder="请输入账号" {...getFieldProps('username')} ></InputItem>
            <InputItem clear
              type={`password`}
              placeholder="请输入密码"
              {...getFieldProps('password')}
              moneyKeyboardAlign="left"
            ></InputItem>

            <div className={ast.captcha}>
              <img onClick={this.random.bind(this)} src={`http://172.25.253.114:28080/km-gradms-core-server/api/auth/captcha?${this.state.randoms}`} alt="" />
              <InputItem clear
                placeholder="请输入验证码" {...getFieldProps('kcaptcha')} ></InputItem>
            </div>
          </List>
        </div>
        <Button className={ast.login_btn} type="primary" onClick={this.login.bind(this, 123)}>{this.state.loading ? msg : loadings}</Button><WhiteSpace />
      </div>
    );
  }
}
export default createForm()(Index);
